
<template>
  <div class="myHeader">
    <div class="msgBox">
      <div class="left-box">
        <!-- 展开关闭小图标 -->

        <!-- 搜索框 -->
        <!--<div class="search-inp">
                <input type="search" class="inp" v-model="searchContent" placeholder="Search" />
            </div> -->
      </div>
      <div class="right-box">
        <!-- 退出登录 -->
        <div class="tologin">
          <span v-if="account != ''">{{role}} 「{{account}}」 已登录</span>
          <span v-else>请先登录</span>
          <el-button type="danger" @click="goPage">退出</el-button>
        </div>
      </div>
    </div>
    <!-- 不要删，填充高度用的 -->
    <div class="navBox">
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
import { createNamespacedHelpers } from "vuex";

const { mapMutations, mapState } = createNamespacedHelpers("publicStore");

export default {
  data() {
    return {
      searchContent: "",
      userImgUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      isfull: false,
      account: "",
      role: "",
    };
  },
  methods: {
    ...mapMutations(["switchIsCollapse", "setNowBreadcrumb"]),
    //实现了网页全屏切换，需下载依赖：npm i screenfull
    clickFullscreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    goPage() {
      this.$router.push("/login");
    },
  },
  computed: {
    ...mapState(["nowBreadcrumb"]),
  },
  created() {
    this.setNowBreadcrumb("adduser");
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    const { account, role } = userInfo;
    this.account = account;
    this.role = role;
    // console.log(userInfo);
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/myHeader.scss";
</style>
